<template>
	<view class="mainPage userpage">
		<view class="user padding">
			<view class="userinfo">
				<image class="avatarUrl" :src=" userInfo.avatar" mode=""></image>
				<view class="info padding-left">
					<view class="nickName text-bold text-lg">{{ userInfo.nickname || '未登录' }}</view>
					<view class="grade sm radius text-sm">
<!--						<image src="@/static/image/my/grade.png" mode="" class="grade-image"></image>-->
<!--						<text class="padding-left-mn qian-gray">普通会员</text>-->
					</view>
				</view>
			</view>
<!--			<view v-if="userInfo.id" class="cuIcon-settingsfill setting" @click="toUrl('/pages/user/myinfo')"></view>-->
		</view>
<!--		<view class="grid col-2 padding fans"  @click="toUrl('/pages/collect/project')">-->
<!--			<view class="item text-center">-->
<!--				<view class="num text-xl">{{ userInfo.projectCollectCount }}</view>-->
<!--				<view class="text text-sm qian-gray">收藏项目</view>-->
<!--			</view>-->
<!--			<view class="item text-center"  @click="toUrl('/pages/collect/partner')">-->
<!--				<view class="num text-xl">{{ userInfo.staffCollectCount }}</view>-->
<!--				<view class="text text-sm qian-gray">收藏客服</view>-->
<!--			</view>-->
<!--			<view class="item text-center">-->
<!--				<view class="num text-xl">0</view>-->
<!--				<view class="text text-sm qian-gray">已服务</view>-->
<!--			</view>-->
<!--			<view class="item text-center">-->
<!--				<view class="num text-xl">0</view>-->
<!--				<view class="text text-sm qian-gray">已完成</view>-->
<!--			</view>-->
<!--		</view>-->
		<view class="container padding padding-top-0" v-if="userInfo.id">
			<view class="box padding-top-0 margin-bottom">
				<view class="padding-sm radius-xl bg-white">
					<view class="crow balance-item">
						<view class="item radius-lg padding" @click="toUrl('/pages/user/wallet/wallet',true)">
							<view class="text">我的钱包</view>
							<view class="money text-black text-bold">{{ userInfo.balance || '0.00'}}</view>
							<view class="bottom-right">
								<image src="@/static/image/my/icon_balance.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 菜单 -->
<!--			<view class="padding-xs radius-xl bg-white menu">-->
<!--				<view class="padding-sm padding-left">常用功能</view>-->
<!--				<view class="grid col-4 padding-xs text-center list">-->
<!--					<view class="item margin-bottom" v-for="(item,index) in menu" :key="index" @click="toUrl(item.page,true)">-->
<!--						<image :src="item.icon" mode=""></image>-->
<!--						<view class="text-sm text-black">-->
<!--							{{item.name}}-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
		</view>
    <view class="padding">
      <view class="flex flex-direction">
        <button class="cu-btn china-btn-bg lg round" v-if="userInfo.id" @click="logout">退出登录</button>
        <button class="cu-btn china-btn-bg lg round" v-else @click="toUrl('/pages/login/login')">登录</button>
      </view>
    </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
        },
				number:[]
			};
		},
		onShow() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
			this.getMyInfo();
		},
		methods:{
			getMyInfo(){
        if (this.userInfo.id) {
          this.$http.getTechnicianDetail({
            id: this.userInfo.id
          }).then(res=>{
            uni.setStorageSync('userInfo',res);
            this.$http.getStaffBalanceList({
              staff_id: this.userInfo.id,
              type: 2
            }).then(res2=>{
              let values = res2.filter(item => item.status === 0).map(item=>parseFloat(item.amount));
              res.balance = parseFloat(res.balance) - values.reduce((a,b)=>a+b,0);
              this.userInfo = res;
            })
          })
        }
			},
      logout() {
        uni.removeStorageSync('userInfo');
        this.userInfo = {};
      }
		}
	}
</script>

<style lang="less" scoped>
page {
  // 渐变色 上到下 #FF6600 #FFFFFF
  height: 100%;
}
.userpage {
  background: linear-gradient(180deg, #FF6600 0%, #FFFFFF 36%);
}
.user{
	display: flex;
	justify-content: space-between;
	position: relative;
  align-items: center;

	.bg-img{
		position: absolute;
		top: -180upx;
		right: -100upx;
		width: 100%;
		height: 366px;
	}
	.userinfo{
		display: flex;
    align-items: center;
		flex: 1;
		margin-left: 20upx;
		z-index: 99;
		.avatarUrl{
			border-radius: 50%;
			width: 100upx;
			height: 100upx;
		}
		.info{
      color: #ffffff;
			margin-top:10upx;
			.grade{
				display: flex;
				align-items: center;
				.grade-image{
					width: 25upx;
					height: 25upx;
				}
			}
		}
	}
	.setting{
		font-size: 40upx;
		z-index: 99;
		padding-right:20upx
	}
}
.fans{
	position: relative;
	z-index: 99;
}
.container{
	position: relative;
	z-index: 99;
	.box{
		.balance-item{
			justify-content: space-between;
			.item{
				position: relative;
				background-color: #efefef;
				width: 45%;
				height: 140rpx;
				.bottom-right{
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: white;
					padding:10rpx;
					border-top-left-radius: 30rpx;
					border-bottom-right-radius: 20rpx;
					border: 1rpx solid #efefef;
					image{
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
			.money{
				font-size: 40upx;
			}
		}
	}
}
.menu{
	.list{
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 60upx;
				height: 60upx;
			}
		}
	}
}
.qian-gray{
	color: gray;
}
</style>
